<template>
  <div class="app-container">
    <!-- Header 区域（导航栏） -->
    <es-header></es-header>

    <!-- 商品 Item 项组件 -->
    <!-- 一个es-goods组件就是一条商品数据 -->
    <!-- 所以到时候要数组有多少个元素，就生成多少个这样的组件 -->
    <!-- es-goods组件有两个事件： 
         1. stateChange：这是当选中状态发生变化调用的事件 -->
    <!-- 2. countChange：这是当数量发生改变调用的事件 -->
    <es-goods
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :thumb="item.goods_img"
      :price="item.goods_price"
      :count="item.goods_count"
      :state="item.goods_state"
      @stateChange="getState"
      @countChange="getCount"
    ></es-goods>

    <!-- Footer 区域 -- 底部统计区域 -->
    <es-footer></es-footer>
  </div>
</template>

<script>
import EsHeader from "@/components/Header.vue";
import EsFooter from "@/components/Footer.vue";
import EsGoods from "@/components/Goods.vue";

// 导入vuex的辅助函数
import { mapState } from "vuex";

export default {
  name: "App",
  created() {
    // 发请求，就是调用vuex里的actions
    this.$store.dispatch("mCart/initCartList");
  },
  methods: {
    // 商品的选中状态发生了变化
    getState(e) {
      //参数： {id: 1, value: false}
      // console.log('选中状态发生改变', e);
      this.$store.commit('mCart/updateGoodsState', e)
    },

    // 商品的数量发生了变化
    // e就是传递过来的值，里面有id，还有value，value就是操作后的结果
    getCount(e) {
      // {id: 1, value: 2}
      // console.log('数量变化了', e);

      // 要修改到vuex里的数据，调用封装好的mutations
      this.$store.commit('mCart/updateGoodsCount', e)
    },
  },

  computed: {
    // 一定要注意：mapState和mapGetter要访问子模块里的数据
    // 都需要先开启命名空间
    ...mapState("mCart", ["list"]),
  },
  components: {
    EsHeader,
    EsFooter,
    EsGoods,
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 46px 0 50px 0;
}
</style>